<template>
    <div class="el-table">
      <el-table class="my-table" ref="table" :data="listData" border style="width: 100%" @selection-change="handleSelectionChange">
        <!-- 是否需要选择器 -->
        <el-table-column fixed v-if="showSelectColumn" type="selection" align="center" width="60"></el-table-column>
        <!-- 是否需要序号 -->
        <el-table-column fixed v-if="showIndexColumn" type="index" align="center" width="60"></el-table-column>
        <!-- <template> -->
        <!-- <elCol :propList="propList"></elCol> -->
        <el-table-column v-for="propItem in propList" :key="propItem.prop" v-bind="propItem" align="center">
            <!-- 复杂表头时使用elCol组件 -->
          <template v-if="propItem.fzCol">
            <!-- 多级表头时使用elCol组件 -->
            <elCol :propList="propItem.colList"></elCol>
            <!-- 二级表头可以使用一下代码 -->
            <!-- <el-table-column v-for="item in propItem.colList" :key="item.prop" v-bind="item" align="center">
              <template #default="scope">
                <slot :name="item.slotName" :row="scope.row">
                  {{ scope.row[item.prop] }}
                </slot>
              </template>
            </el-table-column> -->
          </template>
          <!-- 一行表头，简单表格 -->
          <template v-if="!propItem.fzCol" #default="scope">
            <!-- 为表格预留插槽 -->
            <slot :name="propItem.slotName" :row="scope.row">
              {{ scope.row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>
        <!-- </template> -->
      </el-table>
    </div>
  </template>
    
  <script>
  export default {
    name: "cus-table",
    props: {
      listData: {
        type: Array,
        required: true
      },
      propList: {
        type: Array,
        required: true
      },
      showSelectColumn: {
        type: Boolean,
        required: false
      },
      showIndexColumn: {
        type: Boolean,
        required: false
      },
    },
    data() {
      return {};
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    methods: {
      handleSelectionChange(value) {
        this.$emit('selectionChange', value)
      }
    },
  };
  </script>
  